<template>
  <view class="appointment-page">
    <!-- 医生信息栏 -->
    <view class="doctor-info">
      <view class="name">{{ doctor.name }}</view>
      <view class="details">
        <text>{{ doctor.department }} | {{ doctor.title }}</text>
        <text class="specialty">擅长：{{ doctor.specialty }}</text>
      </view>
    </view>

    <!-- 预约时间表头 -->
    <view class="header-row">
      <view class="col date">日期</view>
      <view class="col weekday">星期</view>
      <view class="col time">时段</view>
      <view class="col status">状态</view>
    </view>

    <!-- 预约时间段列表 -->
    <view class="data-row" v-for="(item, index) in schedule" :key="index">
      <view class="col date">{{ item.date }}</view>
      <view class="col weekday">{{ item.weekday }}</view>
      <view class="col time">{{ item.time }}</view>
      <view class="col status" :class="item.status">
        {{ getStatusText(item.status) }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 医生信息
const doctor = ref({
  name: '张伟',
  department: '妇产科',
  title: '主任医师',
  specialty: '妇科肿瘤、高危妊娠'
})

// 排班数据
const schedule = ref([
  { date: '04-05', weekday: '周五', time: '08:00-10:00', status: 'available' },
  { date: '04-05', weekday: '周五', time: '10:00-12:00', status: 'booked' },
  { date: '04-06', weekday: '周六', time: '08:00-10:00', status: 'unavailable' },
  { date: '04-06', weekday: '周六', time: '14:00-16:00', status: 'available' },
  { date: '04-07', weekday: '周日', time: '08:00-10:00', status: 'available' },
  { date: '04-07', weekday: '周日', time: '10:00-12:00', status: 'booked' }
])

// 状态文本映射
const getStatusText = (status) => {
  const map = {
    available: '可预约',
    booked: '已约满',
    unavailable: '不可约'
  }
  return map[status] || '未知'
}
</script>

<style scoped lang="less">
@primary-color: #007aff;
@text-dark: #333;
@text-gray: #666;
@bg-gray: #f8f8f8;
@border-color: #eee;

.appointment-page {
  padding: 30rpx;
  background-color: #fff;
  min-height: 100vh;
  font-size: 28rpx;
}

/* 医生信息 */
.doctor-info {
  padding: 30rpx;
  background: #f0f8ff;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
  border: 1rpx solid #e0f0ff;

  .name {
    font-size: 36rpx;
    color: @text-dark;
    font-weight: bold;
    margin-bottom: 12rpx;
  }

  .details {
    display: flex;
    flex-direction: column;
    color: @text-gray;
    font-size: 28rpx;

    .specialty {
      margin-top: 6rpx;
      color: #999;
    }
  }
}

/* 表头与数据行 */
.header-row,
.data-row {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid @border-color;
}

.col {
  padding: 24rpx 10rpx;
  text-align: center;
  color: @text-dark;
  min-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 四列宽度 */
.date    { flex: 1; }
.weekday {  flex: 1; }
.time    {  flex: 1; }
.status  {  flex: 1; }

/* 状态样式 */
.status {
  &.available {
    color: @primary-color;
    font-weight: 500;
  }
  &.booked {
    color: #999;
    font-style: italic;
  }
  &.unavailable {
    color: #ccc;
  }
}

/* 可选：点击交互 */
.data-row {
  &:active {
    background-color: #f5f5f5;
  }
}
</style>